封装axios中请求响应数据加解密 |
您所在的位置：网站首页 › axios 统一设置请求头 › 封装axios中请求响应数据加解密 |
|
在前端开发中，我们经常需要向后端发送请求获取数据。为了保证数据的安全性，在发送请求时需要对请求参数进行加密处理。本文将介绍如何使用Typescript、Axios封装请求响应数据加解密。 安装依赖首先我们需要安装以下依赖： Axios：用于发送请求 crypto-js：用于加密请求参数 npm install axios crypto-js npm install axios 复制代码 封装基础axios以下是一个基础的Axios配置，使用Typescript和Axios进行封装。它包括一个拦截器，用于在每个请求中添加一个通用的请求头。您可以在这个基础上扩展您的请求配置。 import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'; const axiosInstance: AxiosInstance = axios.create({ baseURL: '', timeout: 10000, withCredentials: true, // 允许携带cookie }); axiosInstance.interceptors.request.use((config: AxiosRequestConfig) => { config.headers.common['Authorization'] = 'your-token'; return config; }); export default axiosInstance; 复制代码在这个示例中，我们创建了一个名为axiosInstance的Axios实例，它有一个通用的请求头Authorization，值为your-token。您可以根据自己的需要修改和扩展这个基础配置。 例如，您可以添加一个拦截器，用于在每个请求中添加一个时间戳，以确保请求不会被缓存： axiosInstance.interceptors.request.use((config: AxiosRequestConfig) => { config.headers.common['Authorization'] = 'your-token'; config.headers.common['Cache-Control'] = 'no-cache'; config.headers.common['Pragma'] = 'no-cache'; config.headers.common['Expires'] = '0'; config.params = { ...config.params, timestamp: new Date().getTime(), }; return config; }); 复制代码除此之外，您还可以在这个基础配置中添加错误处理逻辑、超时处理逻辑等等，以满足您的具体需求。 封装加密方法单独封装出加密的方法，可以更加方便的调用，代码如下： import CryptoJS from 'crypto-js'; /** * 对数据进行加密处理 * @param data 需要加密的数据 * @param key 加密密钥 * @returns 加密后的字符串 */ export const encryptData = (data: any, key: string): string => { // 使用CryptoJS库的AES加密方法对数据进行加密处理 const ciphertext = CryptoJS.AES.encrypt( JSON.stringify(data), CryptoJS.enc.Utf8.parse(key), { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7, } ); // 将加密后的结果转换为字符串，并返回 return ciphertext.toString(); } 复制代码这个方法接收两个参数：需要加密的数据以及加密密钥。它使用AES算法对数据进行加密，并返回加密后的字符串。 封装解密方法单独封装出解密的方法，可以更加方便的调用，代码如下： import CryptoJS from 'crypto-js'; /** * 解密数据 * @param ciphertext 密文 * @param key 解密密钥 * @returns 解密后的数据 */ export const decryptData = (ciphertext: string, key: string): T => { let decryptedData; try { // 使用CryptoJS库的AES解密方法对数据进行解密处理 const decryptedBytes = CryptoJS.AES.decrypt( ciphertext, CryptoJS.enc.Utf8.parse(key), { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7, } ); // 将解密后的结果转换为字符串，并解析为JSON对象 const decryptedString = decryptedBytes.toString(CryptoJS.enc.Utf8); decryptedData = JSON.parse(decryptedString); } catch (error) { // 如果解密失败，抛出一个错误 throw new Error('Failed to decrypt data: ' + error.message); } // 返回解密后的数据 return decryptedData as T; } 复制代码在decryptData函数上添加一个泛型，表示期望的解密后的数据的类型。在函数的返回语句中，将返回值转换为T类型。在使用decryptData函数时，需要显式指定期望的返回类型，例如：const decryptedData: MyData = decryptData(ciphertext, key);。 封装请求方法接下来封装一个请求方法，使用Axios发送请求并在发送请求之前对请求参数进行加密处理。解密后台返回的数据使用了与加密方法相同的密钥，将返回的密文数据存储在res.data中。然后，使用CryptoJS库的AES解密方法将密文数据解密为字符串，并将其解析为JSON对象。代码如下： import axios, { AxiosResponse, AxiosError } from 'axios'; import CryptoJS from 'crypto-js'; /** * 发起加密GET请求 * @param url 请求地址 * @param params 请求参数 * @param key 加密密钥 * @returns 返回解密后的JSON对象 */ export const requestGet = async (url: string, params: any, key: string): Promise => { const encryptedParams = encryptData(params, key); try { const res = await axios.get(url, { params: { data: encryptedParams, }, }); if (!res.data) { throw new Error('Response data is empty.'); } return decryptData(res.data, key); } catch (error) { throw new Error('Failed to send request: ' + error.message); } }; /** * 发起加密POST请求 * @param url 请求地址 * @param data 请求参数 * @param key 加密密钥 * @returns 返回解密后的JSON对象 */ export const requestPost = async (url: string, data: any, key: string): Promise => { const encryptedData = encryptData(data, key); try { const res = await axios.post(url, { data: encryptedData, }); if (!res.data) { throw new Error('Response data is empty.'); } return decryptData(res.data, key); } catch (error) { throw new Error('Failed to send request: ' + error.message); } }; 复制代码将requestGet和requestPost方法的返回类型定义为Promise，其中T是解密后的数据类型。在调用这些方法时显式指定解密后的数据类型，例如const res = await requestGet('', params, 'my-secret-key');。 requestGet方法封装了一个GET请求，requestPost方法封装了一个POST请求。使用了CryptoJS库的AES加密和解密方法对请求参数和返回数据进行了处理。在使用这些方法时，您需要提供加密密钥，并根据需要传递请求参数。 对返回的数据检测是否为空或无效。如果数据为空或无效，我们将抛出一个错误。然后使用AES解密方法对返回的数据进行解密。如果解密失败，将抛出一个错误。然后，将解密后的数据解析为JSON对象。如果解析失败，将抛出一个错误。最后，将解密后的JSON对象返回给调用方。 使用封装方法在React组件中使用我们封装的请求方法了。代码如下： import { request } from './request'; const App = () => { const handleGetData = async () => { try { const res = await requestPost('', { username: 'user', password: 'pass', }, 'my-secret-key'); console.log(res.data); } catch (error) { console.error(error); } }; return ( Get Data ); } 复制代码上述代码中，调用requestPost方法发送一个POST请求，请求参数为{ username: 'user', password: 'pass' }。传递的加密密钥为my-secret-key。在请求成功后，控制台将输出返回的数据。对于这个加密秘钥可以统一封装好，可以不用每次调用的时候都去传参。 结尾本文写了如何在前端开发中，使用Typescript、Axios封装一个请求加密方法。首先，我们安装了必要的依赖：Axios和crypto-js。然后，我们封装了一个基础的Axios配置，并添加了一个拦截器，用于在每个请求中添加一个通用的请求头。接下来，我们封装了加密和解密方法，使用AES算法对请求参数和返回数据进行加密和解密处理。最后，我们封装了一个请求方法，该方法使用Axios发送请求并在发送请求之前对请求参数进行加密处理。在请求成功后，使用CryptoJS库的AES解密方法将返回的密文数据解密为字符串，并将其解析为JSON对象。 如果您需要在前端开发中发送请求并保护数据的安全性，可以参考使用本文的方法进行加密和解密处理。如有错误或更好的建议，欢迎评论区一起交流哈。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |